<template>
	<view>
		<uni-popup ref="popup" type="left" background-color="#fff">
			<view style="margin-top: 150rpx; width: 500rpx">
				<u-list>
					<u-list-item>
						<u-cell :title="name" @click="toLoginOrUserInfo()">
<!-- 							<u-avatar slot="icon" icon="user" style="margin-right: 100rpx;" /> -->
						</u-cell>
					</u-list-item>
					<u-list-item v-for="(item, index) in listUrls" :key="index">
						<u-cell :title="item.name" @click="toPage(item.path)">
						</u-cell>
					</u-list-item>
				</u-list>
			</view>
		</uni-popup>
		
		<view id="main" :style="{'background-color' : backgroundColor}">
			<button :style="{'background-color' : navButtonColor}" type="primary" @click="showDrawer()" class="nav"></button>
		</view>
	</view>
</template>

<script>
	import {
		uniPopup
	} from '@dcloudio/uni-ui'
	export default {
		name: 'topbar',
		components: {
			uniPopup
		},
		props: {
			backgroundColor: {
				default: '#162bed'
			},
			navButtonColor: {
				default: '#2725ab'
			}
		},
		data() {
			return {
				visible: false,
				placement: 'left',
				src: '',
				name: '未登录',
				listUrls: [{
						'name': '主页',
						'path': '/pages/index/index'
					},
					{
						'name': "增加数据库连接",
						'path': "/pages/database/addconnection"
					},
					{
						'name': "查看有数据库连接",
						'path': "/pages/database/allconnection"
					},
				],
			}
		},
		created() {
			this.name = uni.getStorageSync("name")
		},
		methods: {
			showDrawer() {
				this.$refs.popup.open('left')
			},
			toLoginOrUserInfo() {
				var path = ''
				
				if (uni.getStorageSync('token') == '') {
					path = '/pages/user/login'
				} else {
					path = '/pages/user/userInfo'
				}
				
				uni.navigateTo({
					url: path
				})
			},
			toPage(path) {
				uni.navigateTo({
					url: path
				})
			},
		},
	}
</script>

<style>
	#main {
		width: 100%;
		height: 450rpx;
		display: flex;
		align-items: center;
	}

	.nav {
		margin-left: 100rpx;
		width: 150rpx;
		height: 150rpx;
		border: none;
		border-radius: 20rpx;
	}
</style>
